<template>
	<view class="">
		<scroll-view scroll-y="true" ref="scroll">
			<view></view>
		</scroll-view>
		
		<navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
		
		<view>----</view>
		<view>计数：{{count}}</view>
		<view>----</view>
		<navigator open-type="reLaunch" url="/pages/demo4/demo4">跳转到demo4</navigator>
		
		<view v-for="item in 50">{{item}}</view>
		
		<view class="fixed" v-if="fixed">↑</view>
		
	</view>
</template>

<script setup>
// 导入vue
import {ref} from "vue"
// 在uniapp中导入对应的生命周期
import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from '@dcloudio/uni-app'

// 设置对应的常量
const name = ref("张三")
const age = ref(18)
const scroll = ref(null)
const count = ref(0)
const fixed = ref(false)


let time = setInterval(()=>{
	count.value++
},50)

// 可以用于接受上个页面传过来的参数
// 在执行onReady时，dom已经挂载完毕了

// 一开始进入页面就会触发这个
onLoad((e)=>{
	name.value = "李四"
	
	console.log(e);
	name.value = e.name
	console.log("onload函数");
})

// 每次进入页面都会触发这个
onShow(()=>{
	console.log("onShow函数");
	time = setInterval(()=>{
		count.value++
	},50)
})

onHide(()=>{
	console.log("onHide函数");
	clearInterval(time)
})

// 用onReady才可以拿到这个scroll.value
onReady(()=>{
	console.log("onReady函数");
})

// 只有当前页面被协助了才会触发这个
onUnload(()=>{
	console.log("onUnload卸载页面");
})

// 监听滑动事件
onPageScroll((e)=>{
	console.log(e.scrollTop);
	if(e.scrollTop>200){
		fixed.value = true
	}else{
		fixed.value = false
	}
})

</script>

<style lang="scss" scoped>
.fixed{
	// 宽度
	width: 100px;
	// 高度
	height: 100px;
	// 背景颜色
	background: orange;
	// 固定定位
	position: fixed;
	// 右边为30px
	right: 30px;
	// 下边为30px
	bottom: 30px;
}	
</style>
